<template>
  <div class="box">
    <div class="first">
       <h3>购物车案例</h3>
    </div>
    <div class="second">
      <ul>
        <li v-for="(item, index) in shoppingCart" :key="index">
          <div class="right">
             <img src="../assets/微信图片_20250421125941.jpg" alt="">
          </div>
          <div class="left">
             <h3>{{ item.name }}</h3>
             <div class="bottom">
                <span style="color: red;">￥{{ item.price }}</span>
                <!-- 传递索引 -->
                <Number :index="index"></Number>
             </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="last">
        <span >共{{ sum }}件商品，合计：
          <span style="color: red;">
          ￥{{ sumPrice }}
          </span>
        </span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import Number from  './Numbore.vue'
export default {
    name: 'ListData',
    components: {
        Number 
    },
    data() {
        return {
           
        } 
    },
    computed: {
        ...mapState('shopping', ['shoppingCart', 'sumPrice','sum'])  
    },
    methods: {
       ...mapMutations('shopping', ['RemoveItem']),
    }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .box{
   width: 500px;
   margin: 50px auto; 
  }
  .first{
   width: 500px;
   height: 50px;
   background-color: rgb(24, 229, 24);
   text-align: center;
  }
  .second{
  width: 100%;
    height: 400px;
    overflow-y: auto;
  }
 .first h3{
    color: white;
    font-size: 20px;
    line-height: 50px; 
  }
  ul{
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li{
    display: flex;
    padding: 10px;
    width: 480px;
    height: 100px;
  }
  img{
    width: 100px;
    height: 100px;
  }
  .left{
    width: 350px;
    height: 100%;
   position: relative; 
  }
  .bottom{
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    width: 100%;
 }
 .bottom span{
    margin-left: 10px;
  } 
</style>